<template>
  <template v-if="url">
    <div class="image_box">
      <el-image :src="url" fit="cover" class="image">
        <template #error>
          <el-icon>
            <icon-picture />
          </el-icon>
        </template>
      </el-image>
      <div v-if="route.query.type != 'look'" class="msk_box" @mouseenter="mskVisible = true"
        @mouseleave="mskVisible = false">
        <el-icon v-if="mskVisible" @click="onDelete">
          <delete />
        </el-icon>
      </div>
    </div>
  </template>
  <el-upload v-else action="" accept=".jpg,.JPG,.jpeg,.JPEG,.png,.PNG" :show-file-list="false" :auto-upload="false"
    :on-change="handleChange">
    <div class="btn_box">
      <div class="icon">
        <el-icon>
          <Plus />
        </el-icon>
      </div>
      <div class="text">{{ buttonName }}</div>
    </div>
  </el-upload>
</template>
<script lang="ts" setup>
  import { ref, withDefaults, defineProps, watch } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Picture as IconPicture } from '@element-plus/icons-vue'
  import { uploadFile2 } from '@/api/common'
  import { useRoute } from 'vue-router'
  interface Props {
    url?: string
    rule: any
    buttonName: any
  }
  const props = withDefaults(defineProps<Props>(), {
    url: '',
    buttonName: '点击上传',
    rule: () => {
      return {
        type: 'jpg|JPG|jpeg|JPEG|png|PNG',
        unit: 'MB',
        size: 20
      }
    }
  })
  const route = useRoute()
  const emit = defineEmits(['submit'])
  const mskVisible = ref(false)
  const onShowMsk = () => {
    mskVisible.value = true
  }
  // 上传图片
  const handleChange = (file: any) => {
    const fileName = file.name.split('.')
    if (!props.rule.type.includes(fileName.pop())) {
      ElMessage.warning('上传文件类型不正确, 请重新上传!')
      return
    }
    if (props.rule.unit === 'KB') {
      if (file.size / 1024 > props.rule.size) {
        ElMessage.warning('图片大小不能超过' + props.rule.size + 'KB')
        return
      }
    }
    if (props.rule.unit === 'MB') {
      if (file.size / 1024 / 1024 > props.rule.size) {
        ElMessage.warning('图片大小不能超过' + props.rule.size + 'MB')
        return
      }
    }
    uploadFile2({
      file: file.raw,
      fileName: file.name
    }).then((res: any) => {
      emit('submit', res.url)
    })
  }
  // 删除图片
  const onDelete = () => {
    emit('submit', '')
  }
  watch(
    () => props.url,
    () => {
      mskVisible.value = false
    }
  )
</script>
<style lang="scss" scoped>
.btn_box {
  width: 110px;
  height: 110px;
  border-radius: 3px;
  border: 1px dashed #c0ccda;
  background: #fbfdff;
  color: #ff6b00;
  text-align: center;

  .icon {
    transform: translateY(13px);
    font-size: 22px;
    font-weight: 700;
  }

  .text {
    transform: translateY(30px);
  }

  &:hover {
    border: 1px dashed #ff6b00;
  }
}

.image_box {
  max-height: 112px;
  position: relative;

  .image {
    width: 110px;
    height: 110px;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid #c0ccda;
    font-size: 60px;
  }

  .msk_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 110px;
    box-sizing: border-box;
    border-radius: 3px;
    display: grid;
    place-content: center;
    background-color: rgba(0, 0, 0, 0);
    font-size: 30px;

    .el-icon {
      color: #fff;
      cursor: pointer;

      &:hover {
        color: #f56c6c;
      }
    }

    &:hover {
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
}
</style>
